import React from 'react';
import { Select, Tooltip } from 'antd';
//@ts-ignore
import { QuestionCircleOutlined } from '#/utils/antdIcons';
import { SelectAll } from '../index';
import type { IOptionType } from '../../type';
import styles from './index.less';

interface IProps {
  /**
   * 选择事件
   */
  onChange?: (values: string[]) => void;
  /**
   * 点击事件
   */
  onClick?: (values: string[]) => void;
  /**
   * 提示语
   */
  hintText?: string;
  /**
   * 选择值
   */
  value?: string[];
  /**
   * 选项
   */
  options?: IOptionType[];
  /**
   * 占位符
   */
  placeholder?: string;
  /**
   * 最多显示几个标签
   */
  maxTagCount?: number;
  /**
   * 显示几个字
   */
  maxTagTextLength?: number;
  /**
   * 是否显示下拉小箭头
   */
  showArrow?: boolean;

  /**
   * 是否展开
   */
  open?: boolean;
  /**
   * logo
   */
  logo?: React.ReactNode;
  /**
   * 全选时显示名称
   */
  alltitle?: string;
  /**
   * 样式
   */
  style?: any;
  /**
   * 模式
   */
  mode?: string;
  /**
   * 是否显示边框
   */
  bordered?: boolean;
}

const ExplainSelect = (props: IProps) => {
  const { hintText = '', mode, ...rest } = props;
  return (
    <div className={styles.container}>
      <Tooltip placement="topLeft" title={hintText}>
        <span className={styles.hintText}>
          <QuestionCircleOutlined className={styles.hint} />
        </span>
      </Tooltip>
      {mode ? <SelectAll {...rest} /> : <Select {...rest} />}
    </div>
  );
};

export default ExplainSelect;
